<!--
 * @authors 沙洲 chenchenyixin@qq.com http://gitee.com/shazhou
 * @date    2019-12-26 15:53:45
-->
<template>
  <panel title="理财精选">
    <section class="content">
    	<dl class="item border-right border-bottom" v-for="(item,index) of items" :key="index">
    		<dt>{{item.title}}<span class="red">{{item.subTitle}}</span></dt>
    		<dd>{{item.rate}}</dd>
    		<dd>{{item.text}}</dd>
    	</dl>
    </section>
  </panel>
</template>

<script>
import panel from '../../../components/panel.vue'
export default {
  name: 'money',
  data(){
	  return{
	  	items: [{
        title: "定期理财",
        subTitle: "理财首选",
        rate: "5.60%",
        text: "历史年化回报率"
      }, {
        title: "小白理财",
        subTitle: "理财首选",
        rate: "4.22%",
        text: "7日年化收益率"
      }, {
        title: "月月盈",
        subTitle: "养老保障",
        rate: "5%",
        text: "七日年化收益率"
      }, {
        title: "小白基金",
        subTitle: "天天赚钱",
        rate: "4.27%",
        text: "7日年化收益率"
      }]
	  }
  },
  props:{
  
  },
  components:{
  	panel
  },
  created(){

  },
  mounted(){

  },
  methods:{

  }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/stylus/mixins.styl'
.content
	list(flex,row)
	justify-content:space-around
	box-sizing:border-box
	.item
		width:50%
		// position:relative
		padding:15px 15px
		box-sizing:border-box
		border-bottom:0.5px solid #eaeaea
		&:nth-child(3)
			border-bottom:none
		&:nth-child(4)
			border-bottom:none
		&:nth-child(2n)
			border-right:none
		dt
			list(flex,row)
			justify-content:flex-start
			align-items:center
			font-size:14px
			line-height:22px
			color:#333
			font-weight:bold
			.red
				font-size:12px
				color:#ff5155
				border:1px solid #ff5155
				padding:0 4px
				border-radius:3px
				margin-left:5px
				height:16px
				line-height:16px
		dd
			ellipsis(1)
			font-weight:bold
			font-size:18px
			color:#ff5155
			line-height:26px
			&:nth-child(3)
				font-weight:normal
				color:#666
				font-size:14px
				line-height:20px
				
			

</style>


